import React, { useState, useEffect } from 'react';
import { LaptopOutlined, UserOutlined, EditOutlined, SaveOutlined, LogoutOutlined } from '@ant-design/icons';
import { Layout, Menu, Button, Image, Form, Input, Avatar, Modal, message } from 'antd';
import { useNavigate } from 'react-router-dom';

const { Header, Content, Sider } = Layout;

// 定义二级菜单项
const items2 = [
  {
    icon: <UserOutlined />,
    label: "启动会议",
    key: 'startMeeting',
  },
  {
    icon: <LaptopOutlined />,
    label: "历史会议",
    key: 'historyMeeting',
  },
];

// 用户账户页面的路径
const userAccountPath = '/Userinf';
const historyMeetingPath = '/historyMeeting'; // 历史会议页面的路径
const loginPath = '/'; // 登录页面的路径

function Userinf() {
  const [form] = Form.useForm();
  const navigate = useNavigate();
  const [isEditing, setIsEditing] = useState(false);
  const [isModalVisible, setIsModalVisible] = useState(false);
  const [userInfo, setUserInfo] = useState({
    avatar: '/placeholder.svg?height=100&width=100',
    name: '张三',
    fullName: '张三丰',
    phone: '13800138000',
    class: '高三二班'
  });

  useEffect(() => {
    form.setFieldsValue(userInfo);
  }, [form, userInfo]);

  const handleMenuClick = (e) => {
    if (e.key === 'startMeeting') {
      navigate('/svideo'); // 跳转到当前页面
    } else if (e.key === 'historyMeeting') {
      navigate(historyMeetingPath); // 跳转到历史会议页面
    }
  };

  const handleEdit = () => {
    if (isEditing) {
      form.validateFields().then(values => {
        setUserInfo({ ...userInfo, ...values });
        setIsEditing(false);
        message.success('保存成功');
      });
    } else {
      setIsEditing(true);
    }
  };

  const showLogoutModal = () => {
    setIsModalVisible(true);
  };

  const handleLogout = () => {
    setIsModalVisible(false);
    navigate(loginPath);
  };

  return (
    <Layout style={{ height: '100vh', margin: 0 }}>
      <Header
        style={{
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'space-between',
          width: '100%',
          height: '64px',
          backgroundColor: 'white',
          borderBottom: '1px solid #e8e8e8',
        }}
      >
        <Image src='/logo.png' preview={false} style={{ width:'70px', marginLeft: '-50px', marginTop: '-10px'}} />
        <div style={{ display: 'flex', alignItems: 'center' }}>
          <Menu
            theme="dark"
            mode="horizontal"
            defaultSelectedKeys={['2']}
            items={[]}
            style={{ flex: 1, minWidth: 0 }}
          />
          <Button
            type="primary"
            shape="circle"
            icon={<UserOutlined style={{ fontSize: '20px' }} />}
            size="large"
            onClick={() => navigate(userAccountPath)}
            style={{ backgroundColor: 'blue', border: '1px solid #ccc' }}
          />
        </div>
      </Header>
      
      <Layout>
        <Sider
          width={200}
          style={{ background: '#fff', borderRight: '1px solid #e8e8e8' }}
        >
          <Menu
            mode="inline"
            defaultSelectedKeys={['startMeeting']}
            items={items2}
            onSelect={handleMenuClick}
            style={{ height: '100%', borderRight: 0 }}
          />
        </Sider>

        <Layout style={{ padding: 0 }}>
          <Content
            style={{
              padding: 24,
              margin: 0,
              minHeight: 'calc(100vh - 64px)',
              background: '#fff',
            }}
          >
            <div style={{ maxWidth: '600px', margin: '0 auto' }}>
              <div style={{ display: 'flex', alignItems: 'center', marginBottom: '24px' }}>
                <Avatar size={64} src={userInfo.avatar} />
                <h2 style={{ marginLeft: '16px' }}>{userInfo.name}</h2>
              </div>
              <Form form={form} layout="vertical">
                <Form.Item name="fullName" label="全名">
                  <Input disabled={!isEditing} />
                </Form.Item>
                <Form.Item name="phone" label="电话号码">
                  <Input disabled={!isEditing} />
                </Form.Item>
                <Form.Item name="class" label="班级">
                  <Input disabled={!isEditing} />
                </Form.Item>
              </Form>
              <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: '24px' }}>
                <Button type="primary" onClick={handleEdit} icon={isEditing ? <SaveOutlined /> : <EditOutlined />}>
                  {isEditing ? '保存' : '编辑资料'}
                </Button>
                <Button onClick={showLogoutModal} icon={<LogoutOutlined />}>
                  退出登录
                </Button>
              </div>
            </div>
          </Content>
        </Layout>
      </Layout>
      <Modal
        title="确认退出"
        visible={isModalVisible}
        onOk={handleLogout}
        onCancel={() => setIsModalVisible(false)}
        okText="确认"
        cancelText="取消"
      >
        <p>您确定要退出登录吗？</p>
      </Modal>
    </Layout>
  );
}

export default Userinf;